<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>flexslider</title>
	<link rel="stylesheet" href="flexslider.css">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<script src="jquery.min.js"	></script>
	<script src="jquery.flexslider.min.js"></script>
	<style>
		*{
			padding: 0;
			list-style: none;
			margin:0;
		}
		.flexslider{
			width:1200px;
			margin:100px auto;
		}
		@media(max-width:1240px){
			.flexslider{
				width:94%;
			}
		}
		li{
			margin-right: 15px;
		}
	</style>
</head>
<body>
	<div class="flexslider flexslider-grid">
		<ul class="slides">
			<li>1
				<img src="http://www.marcopolo.com.cn//media/images/products/2018/03/%E6%95%88%E6%9E%9C%E5%B1%9E%E6%80%A7%E5%9B%BE_Bni7i4L.jpg" alt="">
			</li>
			<li>2
				<img src="http://www.marcopolo.com.cn//media/images/products/2018/03/%E6%95%88%E6%9E%9C%E5%B1%9E%E6%80%A7%E5%9B%BE_Bni7i4L.jpg" alt="">
			</li>
			<li>3
				<img src="http://www.marcopolo.com.cn//media/images/products/2018/03/%E6%95%88%E6%9E%9C%E5%B1%9E%E6%80%A7%E5%9B%BE_Bni7i4L.jpg" alt="">
			</li>
			<li>4
				<img src="http://www.marcopolo.com.cn//media/images/products/2018/03/%E6%95%88%E6%9E%9C%E5%B1%9E%E6%80%A7%E5%9B%BE_Bni7i4L.jpg" alt="">
			</li>
			<li>5
				<img src="http://www.marcopolo.com.cn//media/images/products/2018/03/%E6%95%88%E6%9E%9C%E5%B1%9E%E6%80%A7%E5%9B%BE_Bni7i4L.jpg" alt="">
			</li>
			<li>6
				<img src="http://www.marcopolo.com.cn//media/images/products/2018/03/%E6%95%88%E6%9E%9C%E5%B1%9E%E6%80%A7%E5%9B%BE_Bni7i4L.jpg" alt="">
			</li>
			<li>7
				<img src="http://www.marcopolo.com.cn//media/images/products/2018/03/%E6%95%88%E6%9E%9C%E5%B1%9E%E6%80%A7%E5%9B%BE_Bni7i4L.jpg" alt="">
			</li>
		</ul>
	</div>
</body>
</html>
<script>	
	$(function(){
		var getGridSize = function () {
		  return ($(window).width() < 768) ? 2 :
		    ($(window).width() < 1201) ? 3 : 4;
		}
		$('.flexslider').flexslider({
			animation:'slide',
			itemWidth:210,
			itemMargin :15,
			slideshow:false,
			slideshowSpeed:500,
			easing: "easeInOutExpo",
			minItems:getGridSize(),
			maxItems:getGridSize()
		})

		$(window).resize(function () {
		    var gridSize = getGridSize();
		        $(".flexslider.flexslider-grid").each(function () {
		          var flexslider = $(this).data("flexslider");
		          console.log(flexslider)
		          flexslider.vars.minItems = gridSize;
		          flexslider.vars.maxItems = gridSize;
		        });
		        // console.log("gridSize:"+gridSize,"这里flexslider是否需要内部刷新？");
		        // $(window).trigger('resize');
		  });

		
	})
</script>